<template>
    
    <!-- 组件模板内容 -->

    <!-- <div class="weui-cells__title"></div> -->
    <div class="comp-wrap">
        <div class="weui-cells__title black">{{title}}<span v-if="required == 1" class="required_icon"> (必填)</span></div>
        <div class="weui-cells__tips">{{tip}}</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <validator name="validation1">
                        <input 
                            class="weui-input" 
                            type="text" 
                            placeholder="请输入" 
                            v-model="val" 
                            v-validate:username="['required']"
                            @valid="onValid" 
                            @invalid="onInvalid"
                        />
                    </validator>
                    <template v-if="isscan == 'true'">                     
                        <span class="single_line" :class="{'iosline_style':iosstyle,'andriodline_style':!iosstyle}"></span>
                        <span class="scan_img" @click="scanqrCode(formid)" :class="{'ios_style':iosstyle,'andriod_style':!iosstyle}"></span>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Navtive API
     *  example : import widget from 'gapi/widget'
     */
    import Vue from 'vue'
    import VueValidator from 'vue-validator'
    Vue.use(VueValidator)
    /**
     *  引入Action
     *  example : import { someFunction } from './SomeAction'
     */
         
    /**
     *  引入Getter
     *  example : import { someFunction } from './SomeGetters'
     */


    export default {
        vuex: {
            getters: {
                
            },
            actions: {
                
            }
        },
        props: ['title', 'tip', 'val', 'required', 'isvalid', 'isscan', 'formid', 'iosstyle'],
        methods: {
            onValid (){
                this.isvalid = true
            },
            onInvalid (){
                if(this.required == 0){
                    this.isvalid = true
                }else{
                    this.isvalid = false
                }
            },
            scanqrCode (formid){
                window.location.href='dmsaas://ScanCodeInfo?'+`formsingle_id=${formid}`
            }
        },
        created (){
            // this.setTitle(this.title)
        }
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style type="text/css">
    html body{
        /*background-color: #fff;*/
    }
    div.weui-cells{
        margin-top:0px;
    }
    div.weui-cells__tips{
        margin-bottom: .3em;
    }
    .scan_img{
        background-image: url(../../static/imgs/scan_code.png);  
        background-size: 18px auto;
        height: 18px;
        width: 18px;
        background-repeat: no-repeat;        
    }
    .ios_style{
        position: absolute;
        right: 4px;
        top: 1px;
    }
    .andriod_style{
        position: absolute;
        right: 4px;
        top: 3px;
    }
    .scan_img:active{
        background-image: url(../../static/imgs/scan_code_click.png);
    }
    .weui-input{
        width: 82%!important;
    }
    .weui-cell__bd{
        position: relative;
    }
    .single_line{
        background-image: url(../../static/imgs/form_single_line.png);  
        background-size: 1px 30px;
        height: 30px;
        width: 1px;
        background-repeat: no-repeat;        
    }
    .iosline_style{
        position: absolute;
        right: 40px;
        top: -4px;
    }
    .andriodline_style{
        position: absolute;
        right: 40px;
        top: -3px;
    }
</style>

